<script>
import answerInput from "./answerInput.vue"
import { showToast } from "@/utils"
import userAnswer from "./userAnswer.vue"
import Title from "../title.vue"
import common from "../common"
import controlBar from "./controlBar.vue"
export default {
  name: "CET_translate",
  components: { Title, answerInput, userAnswer, controlBar },
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
    details: {
      type: Object,
      default: null,
    },
  },
  computed: {
    textContent() {
      return this.details && this.details.cetTranslate ? this.details.cetTranslate.textContent : []
    },
    userAnswer() {
      return this.details && this.details.cetTranslate ? this.details.cetTranslate.userAnswer : ""
    },
  },
  data() {
    return {
      userAnswerValue: "",
      showAnalysis: false,
      inputForm: {
        userAnswer: "",
        userAnswerImage: "",
      },
      common,
    }
  },
  methods: {
    submit() {
      if (!this.inputForm.userAnswer && !this.inputForm.userAnswerImage) {
        showToast.default("请输入答案")
        return
      }
      this.$emit("submit", {
        questionList: [this.inputForm],
        //暂时无法评分，先写死分数为0
        userDoTopicScore: {
          totalTopicNum: 1,
          rightTopicNum: 0,
          errorTopicNum: 0,
          noDoNum: 0,
          score: 0,
          isCalculateScore: 0, //暂不评分
        },
      })
    },
  },
  emits: ["submit", "handleCorrectQuestion"],
  inject: ["root"],
}
</script>

<template>
  <view class="component">
    <title :topic-name="details.topicName"></title>
    <slot></slot>
    <view class="topic-paragraph-item">
      <text style="white-space: pre-wrap" :space="true">{{ textContent.content }}</text>
    </view>
    <!--		题目解析-->
    <view class="analysis" v-if="viewAnalysis">
      <view class="btn-container" v-if="!showAnalysis">
        <view
          class="btn"
          @click="
            () => {
              if (root.checkIsVip()) {
                showAnalysis = true
              }
            }
          "
          >查看解析</view
        >
      </view>
      <template v-else>
        <!--		题目解析-->
        <view class="content" v-if="details.analysis">
          <view v-html="details.analysis"></view>
        </view>
        <!--		参考范文-->
        <view class="content" v-if="details.cetTranslate">
          <view class="label">
            <view class="point"></view>
            <view>参考范文</view>
          </view>
          <view v-html="details.cetTranslate.textContent.trans"></view>
        </view>
      </template>
    </view>
    <!--		答题区域-->
    <view style="margin-top: 30rpx">
      <!--			答题-->
      <answerInput :input-form.sync="inputForm" v-if="!viewAnalysis" />
      <!--			查看答题记录-->
      <userAnswer v-else :details="details.cetTranslate"></userAnswer>
    </view>
    <!--		底部控制按钮-->
    <view class="placeholder"></view>
    <controlBar ref="controlBar" :view-analysis="viewAnalysis" @submit="submit"></controlBar>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  .topic-paragraph-item {
    font-size: calc(32rpx * var(--font-size-rate));
    line-height: 2;
    margin-top: 30rpx;
  }

  > .analysis {
    margin-top: 30rpx;
    .btn-container {
      display: flex;
      justify-content: flex-end;
      .btn {
        font-size: calc(30rpx * var(--font-size-rate));
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        border-radius: 30rpx;
        background: var(--theme-color);
				color: var(--text-color-white);
        width: max-content;
      }
    }
    .content {
      border-radius: 30rpx;
      padding: 30rpx;
      border: 2rpx solid var(--text-color-theme);
      font-size: calc(30rpx * var(--font-size-rate));
      line-height: 2;
      &:not(:first-child) {
        margin-top: 30rpx;
      }
      > .label {
        display: flex;
        align-items: center;
        font-size: calc(32rpx * var(--font-size-rate));
        .point {
          width: 10rpx;
          height: 30rpx;
          background: var(--theme-color);
          margin-right: 20rpx;
        }
      }
    }
  }

  > .placeholder {
    height: calc(230rpx + env(safe-area-inset-bottom));
  }
}
</style>
